<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 表单
                </el-breadcrumb-item>
                <el-breadcrumb-item>基本表单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="商品图片">
                            <el-upload
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :show-file-list="false"
                            :on-remove="handleRemove"
                            :before-upload="beforeUpload"
                            >
                            <i v-if="src==''" class="el-icon-plus"></i>
                            <img v-else :src="src" height="100%" width="100%" alt="">
                           
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                     </el-dialog>
                    </el-form-item>

                    <el-form-item prop="pname" label="商品名">
                        <el-input v-model="form.pname"></el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                    <el-form-item prop="cid" label="一级类目">
                            <el-select v-model="form.cid" placeholder="一级类目"  @change="getCategortSeconds" class="handle-select mr10">
                                <el-option v-for="item in categories" :key="item.cid" :label="item.cname" :value="item.cid"></el-option>
                            </el-select>
                    </el-form-item>
                        </el-col>
                        <el-col :span="12">
                    <el-form-item prop="csid" label="二级类目">
                          <el-select v-model="form.csid" placeholder="二级类目" class="handle-select mr10">
                                <el-option v-for="item in categorySeconds" :key="item.csid" :label="item.csname" :value="item.csid"></el-option>
                            </el-select>
                    </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="市场价" prop="marketPrice">
                                <el-input v-model="form.marketPrice"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="促销价" prop="shopPrice">
                                <el-input v-model="form.shopPrice">
                                    <b slot="prepend">￥</b>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                   
             
                    <el-form-item label="热门推荐">
                        <el-switch v-model="form.isHot"></el-switch>
                    </el-form-item>
                
                    <el-form-item prop="pdesc" label="商品描述">
                        <el-input type="textarea" rows="5" v-model="form.pdesc"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">表单提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import api from "../../api/index.js"
export default {
    name: 'baseform',
    data() {
        return {
          src:"",
          dialogImageUrl: '',
          dialogVisible: false,
          param: new FormData(),
          isAllowUpload:false,
            categories:[],
            categorySeconds:[],
            
            form: {
                pname: '',
                cid: '',
                csid: '',
                image: '',
                isHot: false,
                pdesc:"",
                marketPrice: '',
                shopPrice: '',
            },
            rules:{
                pname:[{required: true,message:'请输入商品名',trigger:'blur'}],
                cid:[{required: true,message:'请选择一级类目',trigger:'blur'}],
                csid:[{required: true,message:'请选择二级类目',trigger:'blur'}],
                pdesc:[{required: true,message:'请输入商品描述',trigger:'blur'}],
                marketPrice:[{required: true,message:'请输入市场价',trigger:'blur'}],
                shopPrice:[{required: true,message:'请输入促销价',trigger:'blur'}],
            }
        };
    },
    created() {
      
        //查询一级类目集合
        this.getCategories();
    },
    methods: {
         //根据一级类目查询二级类目集合
        getCategortSeconds(){
            api.categoryApi.getCategortSeconds(this.form.cid)
            .then(res=>{
                this.form.csid=""
                this.categorySeconds=res.data
            })
        },
        //获取全部一级类目集合
        getCategories(){
            api.categoryApi.getCategories()
            .then(res=>{
                this.categories=res.data

            })
        },
        onSubmit() {
            this.$refs.form.validate(valid=>{
                if(valid&&this.isAllowUpload){
                    
                    this.param.set("pname",this.form.pname)
                    this.param.set("csid",this.form.csid)
                    this.param.set("isHot",this.form.isHot ? 1 : 0)
                    this.param.set("pdesc",this.form.pdesc)
                    this.param.set("marketPrice",this.form.marketPrice)
                    this.param.set("shopPrice",this.form.shopPrice)
                    api.productApi.addProduct(this.param)
                       .then(res=>{
                           if(res.data=="ok"){
                               this.$message.success('提交成功！');
                               this.$router.push("/product")
                               
                           }else{
                               this.$message.error('提交失败！');
                           }
                            
                       })
                       .catch(err=>{
                           this.$message.error("提交失败")
                       })
                }else{
                    this.$message.error("提交失败!!!!!!!")
                    return false
                }
            })
           
        },
        handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      beforeUpload(file){
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        if(isJPG&&isLt2M){
          this.src=URL.createObjectURL(file)
          this.param.set("file",file)
        }
        this.isAllowUpload=isJPG&&isLt2M
        return false
      }
      
    }
};
</script>
